<template>
    <div id="com_btnModal_excutelog">
        <n-popover trigger="hover">
            <template #trigger>
                <n-button class="main-framework-header-func_button"  @click="handleShow()" quaternary circle>
                    <template #icon>
                        <n-icon size="20px">
                            <DocumentScannerOutlined />
                        </n-icon>
                    </template>
                </n-button>
            </template>
            <span>执行日志</span>
        </n-popover>

        <!-- -------------------------------- -->
        <n-modal v-model:show="show">
            <n-card style="width: 50vw" :bordered="true" role="dialog" aria-modal="true">
                <template #header>
                    <p style="font-size: 1.25rem">执行日志</p>
                </template>
                <template #header-extra>
                    <n-icon style="cursor: pointer" size="18" @click="show = false">
                        <CloseFilled />
                    </n-icon>
                </template>
                <main>
                    <n-scrollbar style="max-height: calc(90vh - 145px)">
                        <div v-if="show_text">
                            <p v-for="item in data_ArrayStr" v-html="item"></p>
                        </div>
                        <div v-if="!show_text">
                            <n-table size="tiny" striped class="log-table">
                                <thead>
                                    <tr>
                                        <th class="col-time">时间</th>
                                        <th>创建项</th>
                                        <th>删除项</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="item in data_ArrayObj">
                                        <td class="col-time">{{ item.time }}</td>
                                        <td>
                                            <n-space style="gap: 0 3px">
                                                <n-tag size="small" v-for="c in item.created">
                                                    {{ c }}
                                                </n-tag>
                                                <span v-if="item.created.length == 0">无</span>
                                            </n-space>
                                        </td>
                                        <td>
                                            <n-space style="gap: 0 2px">
                                                <n-tag size="small" v-for="c in item.deleted">
                                                    {{ c }}
                                                </n-tag>
                                                <span v-if="item.deleted.length == 0">无</span>
                                            </n-space>
                                        </td>
                                    </tr>
                                </tbody>
                            </n-table>
                        </div>
                        <p
                            v-if="data_ArrayStr.length == 0"
                            style="text-align: center; margin: 2rem 0 1rem 0">
                            没有日志哦
                        </p>
                    </n-scrollbar>
                </main>
                <template #footer>
                    <n-space justify="space-between">
                        <n-space></n-space>
                        <n-space>
                            <n-button
                                type="info"
                                size="small"
                                v-if="show_text"
                                @click="show_text = !show_text">
                                显示表格
                            </n-button>
                            <n-button
                                type="info"
                                size="small"
                                @click="show_text = !show_text"
                                v-if="!show_text">
                                显示文本
                            </n-button>
                            <n-button type="primary" size="small" @click="show = false">关闭</n-button>
                        </n-space>
                    </n-space>
                </template>
            </n-card>
        </n-modal>
    </div>
</template>
<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { DocumentScannerOutlined, CloseFilled } from '@vicons/material'
import axiosInstance from '@/utils/network/axios'
import type { AxiosResponse } from 'axios'

///////////////////////////////////////////
const data_ArrayStr = ref<Array<string>>([])
const data_ArrayObj = ref<Array<any>>([])
const show_text = ref(false)
///////////////////////////////////////////
const show = ref<boolean>(false)
function handleShow() {
    show.value = true
    axiosInstance.get('/home/execute-log').then((res: AxiosResponse) => {
        const d = res.data
        data_ArrayObj.value = []
        for (let i = 0; i < d.length; i++) {
            data_ArrayObj.value.push(computed_row(d[i]))
            d[i] = inject_html(d[i])
        }
        data_ArrayStr.value = d
    })
}
function inject_html(row: string) {
    row = row.replace('$deleted', '<span class="red">$deleted</span>')
    row = row.replace('$created', '<span class="green">$created</span>')
    return row
}
function computed_row(row: string) {
    const timeMatch = row.match(/\[DATA\]\[(\d+.\d+)\]/)
    const time = timeMatch ? timeMatch[1] : null
    const createdMatch = row.match(/\$created:(\[.*?\])/)
    const created: Array<string> = createdMatch ? JSON.parse(createdMatch[1].replace(/'/g, '"')) : []
    const deletedMatch = row.match(/\$deleted:(\[.*?\])/)
    const deleted: Array<string> = deletedMatch ? JSON.parse(deletedMatch[1].replace(/'/g, '"')) : []
    /*// 2. 提取 created 和 deleted 部分
    const createdMatch = row.match(/\$created:(\[.*?\])/)
    const deletedMatch = row.match(/\$deleted:(\[.*?\])/)

    // 3. 处理 created 和 deleted 数据
    const parseArray = (arrStr:string|undefined) => {
        if (!arrStr || arrStr === '[]') return '无' // 空数组 → "无"
        // 去掉 []，去掉引号，并用逗号分隔（如果有多个元素）
        const content = arrStr.slice(1, -1).replace(/'/g, '').replace(/"/g, '')
        return content || '无' // 如果去掉引号后是空，也返回 "无"
    }

    const created = parseArray(createdMatch?.[1])
    const deleted = parseArray(deletedMatch?.[1])*/
    console.log(created)

    return { time, created, deleted }
}
</script>

<style scope lang="scss">
.main-framework-header-func_button:hover {
    background-color: #f0f0f070;
    color: orange;
}

.log-table {
    td,
    th {
        padding: 3px 6px;
    }
    .col-time {
        white-space: nowrap;
    }
}

.green {
    color: green;
}
.red {
    color: orangered;
}
</style>
